<template>
  <div class="popular-view">
    <app-header />
    
    <main class="container">
      <div class="page-header">
        <h1>热门表情包</h1>
        <p>发现表情宝库上最受欢迎和分享最多的表情包</p>
      </div>
      
      <va-tabs v-model="activeTab">
        <va-tab name="trending">流行趋势</va-tab>
        <va-tab name="most_liked">最多赞</va-tab>
        <va-tab name="most_viewed">最多浏览</va-tab>
        <va-tab name="most_shared">最多分享</va-tab>
      </va-tabs>
      
      <div class="filter-bar">
        <va-select
          v-model="timeRange"
          :options="timeRangeOptions"
          label="时间范围"
        />
        
        <va-select
          v-model="category"
          :options="categoryOptions"
          label="分类"
          clearable
        />
      </div>
      
      <meme-grid 
        :memes="memes"
        :is-loading="isLoading"
        :has-next-page="hasNextPage"
        :empty-message="'没有找到符合选定条件的热门表情包'"
        @load-more="loadMore"
      />
    </main>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import MemeGrid from '../components/MemeGrid.vue'
import { fetchPopularMemes } from '../api/memes'

const memes = ref([])
const isLoading = ref(false)
const page = ref(1)
const totalPages = ref(0)
const activeTab = ref('trending')
const timeRange = ref('week')
const category = ref(null)

const hasNextPage = computed(() => page.value < totalPages.value)

const timeRangeOptions = [
  { text: '今天', value: 'today' },
  { text: '本周', value: 'week' },
  { text: '本月', value: 'month' },
  { text: '全部', value: 'all' }
]

const categoryOptions = [
  { text: '所有分类', value: null },
  { text: '搞笑', value: 'funny' },
  { text: '表情', value: 'reaction' },
  { text: '游戏', value: 'gaming' },
  { text: '动物', value: 'animals' },
  { text: '影视', value: 'movies' }
]

onMounted(() => {
  loadPopularMemes()
})

watch([activeTab, timeRange, category], () => {
  page.value = 1
  loadPopularMemes()
})

async function loadPopularMemes(append = false) {
  if (isLoading.value) return
  
  isLoading.value = true
  
  try {
    const response = await fetchPopularMemes({
      sortBy: activeTab.value,
      timeRange: timeRange.value,
      category: category.value,
      page: page.value
    })
    
    if (append) memes.value = [...memes.value, ...response.data.memes]
    else memes.value = response.data.memes
    
    totalPages.value = response.data.totalPages
  } catch (error) {
    console.error('加载热门表情包失败:', error)
    
    // 演示用模拟数据
    const mockMemes = getMockMemes(20, activeTab.value)
    
    if (append) memes.value = [...memes.value, ...mockMemes]
    else memes.value = mockMemes
    
    totalPages.value = 3
  } finally {
    isLoading.value = false
  }
}

function loadMore() {
  if (hasNextPage.value && !isLoading.value) {
    page.value++
    loadPopularMemes(true)
  }
}

// 生成模拟表情包数据的辅助函数
function getMockMemes(count, sortType) {
  const mockMemes = Array.from({ length: count }, (_, i) => {
    // Generate different ranges of numbers based on sort type
    let likes, views, shares
    
    if (sortType === 'most_liked') {
      likes = 5000 + Math.floor(Math.random() * 15000)
      views = likes * (2 + Math.random() * 8)
      shares = likes * (Math.random() * 0.4)
    } else if (sortType === 'most_viewed') {
      views = 50000 + Math.floor(Math.random() * 150000)
      likes = views * (0.05 + Math.random() * 0.15)
      shares = likes * (Math.random() * 0.4)
    } else if (sortType === 'most_shared') {
      shares = 1000 + Math.floor(Math.random() * 5000)
      likes = shares * (1 + Math.random() * 3)
      views = likes * (2 + Math.random() * 8)
    } else {
      // trending
      likes = 1000 + Math.floor(Math.random() * 9000)
      views = likes * (3 + Math.random() * 7)
      shares = likes * (Math.random() * 0.5)
    }
    
    return {
      id: `popular-${i}`,
      title: `Popular Meme ${i + 1}`,
      imageUrl: `https://picsum.photos/seed/popular${i + 1}/400/300`,
      likes: Math.floor(likes),
      views: Math.floor(views),
      shares: Math.floor(shares),
      createdAt: new Date(Date.now() - Math.floor(Math.random() * 2592000000)).toISOString() // Within the last month
    }
  })
  
  // Sort based on the criteria
  if (sortType === 'most_liked') {
    mockMemes.sort((a, b) => b.likes - a.likes)
  } else if (sortType === 'most_viewed') {
    mockMemes.sort((a, b) => b.views - a.views)
  } else if (sortType === 'most_shared') {
    mockMemes.sort((a, b) => b.shares - a.shares)
  }
  
  return mockMemes
}
</script>

<style scoped>
.popular-view {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin-bottom: 0.5rem;
}

.page-header p {
  color: var(--va-text-secondary);
}

.filter-bar {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style> 